<template>
  <div id="results">
    <van-dropdown-menu>
      <van-dropdown-item
        v-model="value1"
        :options="option1"
        disabled
        title="综合"
      />
      <van-dropdown-item
        v-model="value2"
        :options="option2"
        title="价格"
        @change="price"
      />
      <van-dropdown-item
        v-model="value3"
        :options="option3"
        title="分类"
        @change="cate"
      />
    </van-dropdown-menu>
    <h1 class="kong"></h1>
    <div class="results_goods">
      <ul class="results_ul">
        <li
          v-for="v in goodsData.data"
          :key="v.id"
          @click="$router.push('/details/' + v.id)"
        >
          <img :src="v.list_pic_url" alt="" width="100%" />
          <h2 class="results_name">{{ v.name }}</h2>
          <h3 class="results_price">￥ {{ v.retail_price }}元</h3>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { GetSearchResults } from "@/request/api";
export default {
  props: ["goodsData"],
  data() {
    return {
      keyword: "",
      order: "asc",
      filterCategory: "",
      GetSearchGoodsList: "",
      value1: 0,
      value2: 0,
      value3: 0,
      option1: [{ text: "综合", value: 0 }],
      option2: [
        { text: "价格由高到低", value: 1 },
        { text: "价格由低到高", value: 2 },
      ],
      option3: [
        { text: "全部", value: 1 },
        // { text: "居家", value: 2 },
      ],
    };
  },

  components: {},

  created() {
  },
  mounted(){
    console.log(this.goodsData);
  },
  methods: {
    //按价格排序
    price(v) {
      if (v == 1) {
        this.order = "desc";
      } else {
        this.order = "asc";
      }
      // console.log(this.order);
      GetSearchResults({
        keyword: this.keyword,
        order: this.order,
        sort: "price",
      }).then((res) => {
        // console.log(res);
        this.goodsData.data = res.data.data;
      });
    },
    //按分类排序
     cate(v) {
      GetSearchResults({
        keyword: this.keyword,
        categoryId: v.id,
        sort: "id",
        size: 20,
      }).then((res) => {
        // console.log(res);
        this.goodsData.data = res.data.data;
      });
    }, 
  },
  
};
</script>
<style lang='less' scoped>
.kong {
  // width: 100%;
  height: 0.5rem;
  background-color: #fff;
}
.results_ul {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  background: rgb(255, 255, 255);
  li {
    width: 50%;
    text-align: center;
    font-size: 0.13rem;
    .results_price {
      color: #8b0000;
      margin-top: 0.1rem;
    }
  }
}
</style>


